<script >
import { Paperclip, Delete, Search} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";

export default {
  components: {
    Paperclip,
    Search// 如果需要在模板中直接使用图标组件，可以在这里注册
  },
  computed: {
    Search() {
      return Search
    },
    Delete() {
      return Delete
    }
  },
  data() {
    return {
      queryrole:{
        role:null
      },
      querythree: {
        user_id:null ,
        act_outcome:null,
        act_time:'',
      },
      form:{},
      action_log:[],
      multipleSelection:[], // 用于存储选中的行ID
    }
  },
  methods: {
    btnDel(act_id) {
      console.log(act_id);
      this.$http.get("http://localhost:8080/act/del/" + act_id).then((res) => {
        console.log(res.data);
        if (res.data === 1) {
          console.log("删除成功！");
          ElMessage({
            message: '删除成功！',
            type: 'success',
          })
          this.LoadActData()
        } else {
          console.log("删除失败！");
          ElMessage({
            message: '删除失败！',
            type: 'warning',
          })
        }
      }).catch((err) => {
      })
    },
    onSubmit() {
      console.log(this.querythree);
      this.LoadActData();
      console.log(this.queryrole);
      this.LoadRoleData();
      //  console.log(this.PageInfo);
      //   this.LoadPageData()
    },
    LoadRoleData() {
      this.$http.get("http://localhost:8080/act/queryrole", {
        params: {
          role: this.queryrole.role,
        }
      }).then((res) => {
        this.action_log = res.data;
        console.log(this.action_log);
      }).catch(function (err) {
        console.log(err)
      })
    },
    LoadActData() {
      this.$http.get("http://localhost:8080/act/querythree", {
            params: {
              user_id: this.querythree.user_id,
              act_outcome: this.querythree.act_outcome,
              act_time: this.querythree.act_time,
            }
          }
      ).then((res) => {
        this.action_log = res.data;
        console.log(this.action_log);
      }).catch(function (err) {
        console.log(err)
      })
    },
    handleDateTimeChange(date) {
      console.log(date); // 当日期时间发生变化时，打印新的值
      this.querythree.act_time = date;
      // 在这里可以执行其他逻辑，如搜索、更新数据等
    },
    // 处理选中行的变化
    handleSelectionChange(val) {
      this.multipleSelection = val.map(row => row.act_id); // 假设每行数据都有一个唯一的act_id字段
    },
    // 批量删除操作
    batchDelete() {
      if (this.multipleSelection.length > 0) {
        // 假设我们在这里只是从前端数组中移除数据，实际项目中可能需要发送请求到后端删除
        this.action_log = this.action_log.filter(row => !this.multipleSelection.includes(row.act_id));
        this.multipleSelection = []; // 清空选中的ID
        // 如果需要，可以添加提示或发送请求到后端
        this.$message({
          message: '成功删除选中的操作日志',
          type: 'success'
        });
      } else {
        this.$message({
          message: '请先选择需要删除的行',
          type: 'warning'
        });
      }  // 处理选中行的变化
    },
  },
  mounted(){
    this.LoadActData()
    this.LoadRoleData()
  },
}
</script>

<template>
  <el-card style="max-width: 100%">
    <template #header>
      <div class="card-header" style="text-align: center;" >
        <span><h2>操作日志</h2></span>
      </div>
    </template>
    <el-form :inline="true" :model="querythree" class="demo-form-inline">
      <td>
        <el-form-item label="用户ID" style="width:200px">
          <el-input v-model="querythree.user_id"  placeholder="用户ID" />
        </el-form-item>
      </td>
      <td>
        <el-form-item label="操作结果" style="width:200px">
          <el-select
              v-model="querythree.act_outcome"
              placeholder="操作结果"
              clearable
          >
            <el-option label="成功" value="成功" />
            <el-option label="失败" value="失败" />
          </el-select>
        </el-form-item></td>
      <td>
        <el-form-item label="操作日期" style="width:300px">
          <el-date-picker
              v-model="querythree.act_time"
              type="datetime"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="选择日期时间"
              @change="handleDateTimeChange">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="onSubmit">查询</el-button>
          <el-button type="danger" @click="batchDelete">批量删除</el-button>
        </el-form-item></td>
      <el-form-item label="登陆身份" style="width: 180px">
        <el-select
            v-model="queryrole.role"
            placeholder="选择身份"
            clearable
        >
          <el-option label="用户" value="1" />
          <el-option label="管理员" value="0" />
        </el-select>
      </el-form-item>
      <br/>
    </el-form>
    <el-table
        ref="multipleTableRef"
        :data="action_log"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        class="custom-header-table"><!-- 添加表头定义 -->
      <el-table-column type="selection" width="55" />
      <el-table-column prop="act_id" label="操作ID" width="70" />
      <el-table-column prop="user_id" label="用户ID" width="70" />
      <el-table-column prop="user_ip" label="用户IP" width="120"/>
      <el-table-column prop="user_name" label="用户名称" width="100"/>
      <el-table-column prop="role" label="登录身份" width="100">
        <template #default="scope">
          {{ scope.row.role=== 0 ? "管理员":"用户"}}
        </template>
      </el-table-column>
      <el-table-column prop="act_time" label="操作时间" width="180" />
      <el-table-column prop="act_detail" label="操作详情" width="100" />
      <el-table-column prop="act_object" label="操作对象" width="100" />
      <el-table-column prop="act_outcome" label="操作结果" width="100" />
      <el-table-column fixed="right" label="操作" width="200">
        <template #default="scope">
          <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" icon-color="#626AEF"
                         title="你确认删除吗?" @confirm="btnDel(scope.row.act_id)">
            <template #reference>
              <el-button type="danger" :icon="Delete"/>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<style scoped>
/* 使用深度选择器来覆盖 Element UI 的默认样式 */
.custom-header-table >>> .el-table__header-wrapper th {
  background-color: #87CEFA; /* 浅蓝色背景 */
  color: #333; /* 文字颜色 */
  /* 其他样式 */
}.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}

</style>